<template>
  <div class="wifi-set">
    <van-nav-bar title="连接设备" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <!-- <template #left>
        <van-icon name="search" size="18" />
      </template> -->
      <template #right>
        <!-- <van-icon name="search" size="18" /> -->
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <div class="wifi-set-wrap">
      <div class="step1" v-show="step==1">
        <div class="logo-img-wrap">
          <div>
            <img class="img1" :src="LogoImg" />
          </div>
        </div>

        <div class="wifi-set-title">网络配置</div>
        <van-field v-model="wifiname" placeholder="请输入WiFi名称">
        </van-field>
        <van-field v-model="wifipass" placeholder="请输入WiFi密码"></van-field>
        <van-checkbox v-model="checked" shape="square">允许记住密码</van-checkbox>
        <div class="btn-wrap">
          <van-button round color="#007DFF" plain @click="step=2">下一步</van-button>
        </div>

      </div>

      <div class="step2" v-show="step==2">
        <div class="step2-img-wrap">
          <img class="step2-img-wrap-item1" :src="Step2LImg">
          <img class="step2-img-wrap-item2" :src="Step2CImg">
          <img class="step2-img-wrap-item3" :src="Step2RImg">
        </div>
        <div class="message">
          <div class="msg" @click="showModel">正在发送信息给设备...</div>
          <div class="msg" @click="showModelSuc">请确保手机靠近设备，且无线网络畅通</div>
        </div>
      </div>

      <van-popup overlay-class="reg-fail-pop" v-model="show" overlay round position="bottom" :style="{ bottom:'44.25px',left:'50%',transform:'translateX(-50%)',width:'90%',borderRadius: '0.44444rem' }">
        <div class="reg-fail-pop-wrap">
          <div class="pop-title">注册失败</div>
          <div class="pop-sub-title">解决方法：</div>
          <div class="pop-desc">1.避免手机、设备、路由器之间距离过远</div>
          <div class="pop-desc">2.确保网络可正常上网</div>
          <div class="pop-close" @click="show=false">知道了</div>
        </div>
      </van-popup>

      <van-popup overlay-class="reg-fail-pop" v-model="showSuc" overlay round position="bottom" :style="{ bottom:'44.25px',left:'50%',transform:'translateX(-50%)',width:'90%',borderRadius: '0.44444rem' }">
        <div class="reg-fail-pop-wrap">
          <div class="pop-title">设置成功</div>

          <div class="pop-desc">wifi设置成功，快去玩耍吧</div>

          <div class="pop-close" @click="showSuc=false">知道了</div>
        </div>
      </van-popup>

      <div class="step3" v-show="step==3"></div>

    </div>

  </div>
</template>

<script>

import { NavBar, Icon, Field, Checkbox, Button, Popup } from 'vant';
import LogoImg from "@/assets/images/home/t838_shouye_guanji_normal.png"
import Step2LImg from "@/assets/images/wifi/t838_shouji_icon_normal.png"
import Step2CImg from "@/assets/images/wifi/link.gif"
import Step2RImg from "@/assets/images/wifi/t838_shouye_guan_normal.png"

export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Checkbox.name]: Checkbox,
    [Button.name]: Button,
    [Popup.name]: Popup
  },
  data() {
    return {
      LogoImg,
      Step2LImg,
      Step2CImg,
      Step2RImg,
      wifiname: '',
      wifipass: '',
      checked: false,
      step: 1,
      show: false,
      showSuc: false
    }

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {

    },
    showModel() {
      this.show = true
    },
    showModelSuc() {
      this.showSuc = true
    }
  }
};
</script>

<style lang="less">
.wifi-set {
  .wifi-set-wrap {
    .step1 {
      padding: 0 16px;
      .logo-img-wrap {
        width: 100%;
        text-align: center;
        .img1 {
          width: 252px;
          height: 252.25px;
        }
        .img2 {
          width: 70px;
          height: 18px;
        }
      }
      .wifi-set-title {
        font-size: 11.25px;
        color: #888888;
        margin: 23.75px 0 18.75px;
      }
      .van-checkbox {
        font-size: 13.25px;
        margin-top: 21.25px;
        color: #040404;
      }

      .btn-wrap {
        text-align: center;
        margin-top: 38.75px;
      }
      .van-button {
        margin: 0 auto;
        width: 79.25px;
        border: none;
        background: #dadada;
      }
    }

    .step2 {
      .step2-img-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 100px;
        &-item1 {
          width: 55px;
          height: 116.25px;
          margin-left: 59px;
          margin-right: 39.25px;
        }
        &-item2 {
          width: 20px;
          height: 3px;
        }
        &-item3 {
          width: 133.5px;
          height: 133.5px;

          margin-right: 19.75px;
        }
      }
      .message {
        text-align: center;
        font-size: 13.25px;
        margin-top: 100px;
        .msg {
          line-height: 40px;
        }
      }
    }
  }
}
.reg-fail-pop-wrap {
  padding: 16px 16px 0;
  .pop-title {
    margin: 14px 0;
  }
  .pop-sub-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .pop-desc {
    font-size: 16px;
    line-height: 20px;
  }
  .pop-close {
    font-size: 16px;
    text-align: center;
    color: #007dff;
    cursor: pointer;
    margin: 30.75px 0 20.5px;
  }
}
</style>
